.theme-white {
	.main {
		.main-wrap {
			.main-header {
				background-color: white;
			}
		}

		.bottom-container {
			background-color: #393d43;
		}
	}

	.main-header {
		.logo {
			background-color: #efefef;
		}

		.top-tabs {
			background-color: #b8b8b8;
		}
	}

	.main-content {
		background-color: white;
		
		& > .wrap {
			background-color: white;

			.switch-view {
				opacity: 1;
				color: white;
				background-color: #676767;

				&:hover {
					background-color: #333;
				}
			}
		}
	}

	.top-menu {
		& > ul {
			& > li {
				color: #676767;

				&.guide-highlight {
					color: #333;
					background-color: #f6f6f6;
				}

				&:hover {
					color: #333;
					background-color: #f6f6f6;
				}

				.select-wrap {
					&:before {
						border-bottom-color: #333;
					}

					&:after {
						border-top-color: #333;
					}
				}

				ul {
					background-color: white;
					
					& > li {
						color: #676767;

						&:hover {
							color: #333;
							background-color: #f6f6f6;
						}
					}
				}

				&.board {
					li {
						&.forward {
							.name {
								color: #ccc;
							}
						}
					}
				}
			}
		}
	}

	.top-tabs {
		li {
			color: white;
			background-color: #b8b8b8;

			.close-btn {
				&:hover {
					color: #ff6666;
				}
			}

			&.active {
				color: #2f61cc;
				background-color: #f8f8f8;
			}

			&:hover {
				color: #2868d0;
				background-color: #ededed;

				&.active {
					background-color: #ededed;
				}

				.close-btn {
					visibility: visible;
				}
			}
		}
	}

	.user {
		background-color: white;

		.user-login {
			background-color: #f6f6f6;

			ul li {
				color: #676767;

				&:hover {
					color: #333;

					& > a {
						color: #333;
					}
				}
			}
		}

		.user-info {
			background-color: #f6f6f6;

			.welcome {
				color: #676767;
			}
		}

		.user-menu {
			& > ul {
				background-color: white;

				& > li {
					color: #676767;

					&:hover {
						color: #333;
						background-color: #f6f6f6;
					}
				}
			}
		}
	}

	.sidebar {
		.bar {
			background-color: #5a5a5a;

			ul li {
				color: white;

				&.guide-highlight {
					background-color: #333;
				}

				&.active {
					background-color: #333;
				}

				&:hover {
					background-color: #3f3f3f;
				}
			}
		}

		.project {
			background-color: white;

			.operation {
				background-color: #b8b8b8;

				li {
					color: white;

					&:hover {
						background-color: #676767;
					}
				}
			}

			.list {
				li {
					.title {
						color: white;
						background-color: #676767;
					}

					.view {
						& > div {
							color: #515151;

							&:hover {
								color: #0088ff;
								background-color: #f6f6f6;
							}

							&.active {
								color: #0088ff;
								background-color: #f6f6f6;
							}
						}
					}
					
					&.active {
						.title {
							background-color: #0088ff;
						}
					}
				}
			}
		}

		.component {
			background-color: white;

			.search {
				.key {
					color: #676767;
					background-color: white;
					border: 1px solid #ddd;
				}

				& > i {
					color: #676767;
				}
			}

			.items {
				.list {
					li {
						&.active {
							.name {
								color: #333;
							}
						}
					}
				}

				.item {
					.image {
						background-color: white;
						border: 1px solid #bac4d0;
					}

					.name {
						color: #676767;
					}
				}
			}
		}

		.library {
			background-color: white;

			.list {
				background-color: white;

				li {
					color: #676767;

					&:hover {
						color: white;
						background-color: #0088ff;
					}

					&.active {
						background-color: #0088ff;
					}
				}
			}
		}

		.example {
			background-color: white;

			.list {
				background-color: white;

				li {
					color: #676767;

					& > ul {
						background-color: white;
					}

					&:hover {
						color: white;
						background-color: #0088ff;

						& > ul {
							display: block;
						}
					}

					&.active {
						background-color: #0088ff;
					}
				}
			}
		}
	}

	.right-bar {
		&.active {
			border-left: 2px solid #b8b8b8;
		}

		.bar {
			background-color: #e6e6e6;

			& > ul {
				& > li {
					color: #676767;

					&:hover {
						color: white;
						background-color: #999;
					}

					&.active {
						color: white;
						background-color: #999;
					}
				}
			}
		}

		& > .wrap {
			background-color: #f6f6f6;
		}

		.tab-comment {
			.line-reference {
				.line-num {
					color: #333;
					background-color: #d5d7d9;
				}

				.line-content {
					color: #333;
					background-color: #e7e8eb;
				}
			}

			.publish-comment {
				.comment-content {
					color: #676767;
					border: 1px solid #ccc;
					background-color: white;
				}

				.publish-wrap {
					.line-wrap {
						.use-line {
							border: 1px solid #ccc;
						}

						.use-line-label {
							color: #676767;
						}

						.line {
							background-color: transparent;
							color: #676767;
							border: 1px solid #ccc;
						}

						.tips {
							color: #EA8E76;
						}

						.publish {
							color: white;
							background-color: #0088ff;
						}
					}
				}
			}

			.comment-item {
				border-top: 1px solid #ddd;
				color: #333;

				.right {
					.publish-time {
						color: #999;
					}
				}
			}
		}
	}

	.serial-assitant {
		background-color: #f2f2f2;

		.serial-top {
			background-color: #ddd;
		}

		.serial-bottom {
			& > .log {
				color: #676767;
				background-color: #f2f2f2;
			}
		}

		.serial-input {
			.input-label {
				color: #676767;
			}

			.input {
				color: #676767;
				border: 1px solid #ccc;
				background-color: white;
			}

			.send-btn {
				color: white;
				background-color: #676767;

				&:hover {
					background-color: #333;
				}
			}

			& > ul {
				& > li {
					& > i {
						color: #676767;
					}

					&.active {
						& > i {
							color: #333;
						}
					}
				}
			}
		}

		.options {
			.line-break-label {
				color: #676767;
			}
		}

		.serial-tools {
			& > ul {
				li {
					& > i {
						color: #676767;

						&:hover {
							color: #333;
						}
					}
				}
			}
		}

		.serial-setting {
			background-color: white;

			.title {
				color: white;
				background-color: #5a5a5a;

				.close-btn {
					color: white;

					&:hover {
						color: #FF9696;
					}
				}
			}

			.field {

				& > label {
					color: #676767;
				}

				& > select {
					color: #676767;
					background-color: white;
					border: 1px solid #ccc;
				}
			}
		}
	}

	.interpreter-dialog {
		.x-dialog-title {
			color: white;
			background-color: #5a5a5a;
		}

		.x-dialog-close {
			color: white;
		}
	}

	.save-dialog {
		.x-dialog-content {
			.name {
				color: #676767;
				background-color: white;
				border: 1px solid #ccc;
			}

			.intro {
				background-color: white;
				border: 1px solid #ccc;
			}
		}
	}

	.modal {
		background-color: rgba(47, 50, 60, 0.2);
	}

	.hardware {
		.tools {
			li {
				background-color: #d7d7d7;

	      		& > i {
					color: #515151;
				}

				&:hover {
					background-color: #0088ff;

					& > i {
						color: white;
					}
				}

				.tips {
					color: white;
					background-color: #0088ff;

					&:before {
						border-right-color: #0088ff;
					}
				}
			}
		}

		.center {
			background-color: #f6f6f6;
		}
	}

	.software {
		.barrage {
			.barrage-item {
				color: black;
			}
		}
	}
}